<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程旅行网 - 机票预订,酒店预订,旅游度假,商旅管理</title>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/flight.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
    </link>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.3/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <!-- Flatpickr 日期插件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

    <!-- Swiper 轮播插件 -->
    <!-- Swiper旧版5.4.5（支持直接new） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@5.4.5/css/swiper.min.css">
    <script src="https://cdn.jsdelivr.net/npm/swiper@5.4.5/js/swiper.min.js"></script>

</head>

<body>
    <!-- 顶部导航栏 -->
    <header class="ctrip-header">
        <div class="container">
            <div class="header-top">
                <div class="logo">
                    <a href="#">
                        <img src="picture/logo.png" alt="携程旅行网">
                    </a>
                </div>
                <div class="nav-main">
                    <ul>
                        <li><a href="home.html"><i class="fas fa-hotel"></i> 酒店</a></li>
                        <li><a href="#" class="active"><i class="fas fa-plane"></i> 机票</a></li>
                        <li><a href="#"><i class="fas fa-train"></i> 火车票</a></li>
                        <li><a href="#"><i class="fas fa-ship"></i> 旅游</a></li>
                        <li><a href="#"><i class="fas fa-car"></i> 租车</a></li>
                        <li><a href="#"><i class="fas fa-utensils"></i> 美食</a></li>
                        <li><a href="#"><i class="fas fa-gift"></i> 团购</a></li>
                    </ul>
                </div>
                <div class="user-area">
                    <a href="#" class="login">登录/注册</a>
                    <a href="#" class="app-download">下载携程APP</a>
                </div>
            </div>
        </div>
    </header>

    <section class="search-section">
        <div class="container">
            <div class="search-layout">
                <!-- 左侧搜索表单 -->
                <div class="search-left">
                    <form id="flightSearchForm" class="search-box flight-search" action="fsearch.html" method="get">
                        <div class="trip-type">
                            <label><input type="radio" name="tripType" value="round" checked> 往返</label>
                            <label><input type="radio" name="tripType" value="oneway"> 单程</label>
                            <label><input type="radio" name="tripType" value="multi"> 多程</label>
                        </div>

                        <div class="search-item">
                            <label for="departureCity">出发城市</label>
                            <input type="text" id="departureCity" name="departureCity" placeholder="输入或点击选择城市">
                            <div class="hot-cities departure">
                                <span class="hot-city">北京</span><span class="hot-city">上海</span>
                                <span class="hot-city">广州</span><span class="hot-city">深圳</span>
                                <span class="hot-city">成都</span><span class="hot-city">重庆</span>
                                <span class="hot-city">杭州</span><span class="hot-city">西安</span>
                            </div>
                        </div>

                        <div class="search-item">
                            <label for="arrivalCity">到达城市</label>
                            <input type="text" id="arrivalCity" name="arrivalCity" placeholder="输入或点击选择城市">
                            <div class="hot-cities arrival">
                                <span class="hot-city">三亚</span><span class="hot-city">昆明</span>
                                <span class="hot-city">厦门</span><span class="hot-city">青岛</span>
                                <span class="hot-city">大连</span><span class="hot-city">桂林</span>
                                <span class="hot-city">拉萨</span><span class="hot-city">乌鲁木齐</span>
                            </div>
                        </div>

                        <div class="date-row">
                            <div class="search-item">
                                <label for="departureDate">出发日期</label>
                                <input type="text" id="departureDate" name="departureDate" class="date-input"
                                    placeholder="请选择日期">
                            </div>

                            <div class="search-item return-date">
                                <label for="returnDate">返回日期</label>
                                <input type="text" id="returnDate" name="returnDate" class="date-input"
                                    placeholder="请选择日期">
                            </div>
                        </div>

                        <div class="search-item">
                            <label for="passenger">乘客</label>
                            <select id="passenger" name="passenger">
                                <option value="1">1位成人</option>
                                <option value="2">2位成人</option>
                                <option value="3">3位成人</option>
                                <option value="4">4位成人</option>
                                <option value="1-1">1位成人 + 1位儿童</option>
                                <option value="2-1">2位成人 + 1位儿童</option>
                            </select>
                        </div>

                        <div class="search-item">
                            <label for="cabinClass">舱位等级</label>
                            <select id="cabinClass" name="cabinClass">
                                <option value="economy">经济舱</option>
                                <option value="premium">超级经济舱</option>
                                <option value="business">商务舱</option>
                                <option value="first">头等舱</option>
                            </select>
                        </div>

                        <button type="submit" class="search-btn">搜索机票</button>
                    </form>
                </div>

                <!-- 右侧轮播图 -->
                <div class="search-right">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="picture/flight1.webp" alt="特价机票" class="slider-image">
                                <div class="slide-info">
                                    <h3>暑期特惠机票</h3>
                                    <p>国内机票低至1折起</p>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <img src="picture/flight2.webp" alt="国际机票" class="slider-image">
                                <div class="slide-info">
                                    <h3>周边游</h3>
                                    <p>随时走，及时达 </p>
                                </div>
                            </div>
                            <div class="swiper-slide">
                                <img src="picture/flight3.webp" alt="商务出行" class="slider-image">
                                <div class="slide-info">
                                    <h3>商务出行优选</h3>
                                    <p>商务舱特惠，尊享舒适旅程</p>
                                </div>
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <!-- 主要内容区域 -->
    <main class="container">
        <!-- 促销活动 -->
        <section class="promotion-section">
            <h2 class="section-title">机票特惠活动</h2>
            <div class="promotion-grid">
                <div class="promotion-item big">
                    <img src="picture/flight4.jpg" alt="暑期特惠">
                    <div class="promotion-info">
                        <h3>暑期特惠</h3>
                        <p>国内机票低至1折起</p>
                        <a href="#" class="btn">立即抢购</a>
                    </div>
                </div>
                <div class="promotion-item">
                    <img src="picture/flight5.jpg" alt="周边游">
                    <div class="promotion-info">
                        <h3>周边游</h3>
                        <p>即走即停便利多</p>
                        <a href="#" class="btn">查看详情</a>
                    </div>
                </div>
                <div class="promotion-item">
                    <img src="picture/flight6.webp" alt="商务出行">
                    <div class="promotion-info">
                        <h3>商务出行</h3>
                        <p>商务舱特惠套餐</p>
                        <a href="#" class="btn">立即预订</a>
                    </div>
                </div>
            </div>
        </section>

        <!-- 热门航线推荐 -->
        <section class="route-section">
            <h2 class="section-title">热门航线推荐</h2>
            <div class="route-tabs">
                <div class="tab-header">
                    <div class="tab active" data-tab="domestic">国内热门</div>
                    <div class="tab" data-tab="international">国际/港澳台</div>
                </div>
                <div class="tab-content">
                    <div class="tab-pane active" id="domestic">
                        <div class="route-grid">
                            <div class="route-card">
                                <div class="route-info">
                                    <h3>北京 ⇄ 上海</h3>
                                    <div class="price">¥<span>480</span>起</div>
                                    <div class="time">飞行时间: 2小时</div>
                                </div>
                                <a href="#" class="book-btn">预订</a>
                            </div>
                            <div class="route-card">
                                <div class="route-info">
                                    <h3>广州 ⇄ 成都</h3>
                                    <div class="price">¥<span>520</span>起</div>
                                    <div class="time">飞行时间: 2.5小时</div>
                                </div>
                                <a href="#" class="book-btn">预订</a>
                            </div>
                            <div class="route-card">
                                <div class="route-info">
                                    <h3>深圳 ⇄ 重庆</h3>
                                    <div class="price">¥<span>450</span>起</div>
                                    <div class="time">飞行时间: 2小时20分</div>
                                </div>
                                <a href="#" class="book-btn">预订</a>
                            </div>
                            <div class="route-card">
                                <div class="route-info">
                                    <h3>杭州 ⇄ 西安</h3>
                                    <div class="price">¥<span>380</span>起</div>
                                    <div class="time">飞行时间: 2.5小时</div>
                                </div>
                                <a href="#" class="book-btn">预订</a>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="international">
                        <div class="route-grid">
                            <div class="route-card">
                                <div class="route-info">
                                    <h3>上海 ⇄ 东京</h3>
                                    <div class="price">¥<span>1580</span>起</div>
                                    <div class="time">飞行时间: 3小时</div>
                                </div>
                                <a href="#" class="book-btn">预订</a>
                            </div>
                            <div class="route-card">
                                <div class="route-info">
                                    <h3>北京 ⇄ 新加坡</h3>
                                    <div class="price">¥<span>1980</span>起</div>
                                    <div class="time">飞行时间: 6小时</div>
                                </div>
                                <a href="#" class="book-btn">预订</a>
                            </div>
                            <div class="route-card">
                                <div class="route-info">
                                    <h3>广州 ⇄ 曼谷</h3>
                                    <div class="price">¥<span>1280</span>起</div>
                                    <div class="time">飞行时间: 3.5小时</div>
                                </div>
                                <a href="#" class="book-btn">预订</a>
                            </div>
                            <div class="route-card">
                                <div class="route-info">
                                    <h3>成都 ⇄ 香港</h3>
                                    <div class="price">¥<span>980</span>起</div>
                                    <div class="time">飞行时间: 2.5小时</div>
                                </div>
                                <a href="#" class="book-btn">预订</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>



        <!-- 特价机票 -->
        <section class="flight-deals">
            <h2 class="section-title">特价机票</h2>
            <div class="flight-grid">
                <div class="flight-card">
                    <div class="flight-header">
                        <div class="airline">
                            <img src="picture/h1.webp" alt="国航">
                            <span>中国国航</span>
                        </div>
                        <div class="flight-no">CA1837</div>
                    </div>
                    <div class="flight-body">
                        <div class="departure">
                            <div class="time">08:30</div>
                            <div class="city">北京(PEK)</div>
                        </div>
                        <div class="duration">
                            <div class="line">
                                <span>2h30m</span>
                            </div>
                            <div class="type">直飞</div>
                        </div>
                        <div class="arrival">
                            <div class="time">11:00</div>
                            <div class="city">上海(PVG)</div>
                        </div>
                        <div class="price">
                            <div class="amount">¥<span>480</span></div>
                            <a href="#" class="book-btn">预订</a>
                        </div>
                    </div>
                    <div class="flight-footer">
                        <span class="tag">经济舱</span>
                        <span class="tag">可退改</span>
                        <span class="tag">含行李</span>
                    </div>
                </div>
                <div class="flight-card">
                    <div class="flight-header">
                        <div class="airline">
                            <img src="picture/h2.webp" alt="东航">
                            <span>东方航空</span>
                        </div>
                        <div class="flight-no">MU5123</div>
                    </div>
                    <div class="flight-body">
                        <div class="departure">
                            <div class="time">14:20</div>
                            <div class="city">上海(PVG)</div>
                        </div>
                        <div class="duration">
                            <div class="line">
                                <span>2h10m</span>
                            </div>
                            <div class="type">直飞</div>
                        </div>
                        <div class="arrival">
                            <div class="time">16:30</div>
                            <div class="city">北京(PEK)</div>
                        </div>
                        <div class="price">
                            <div class="amount">¥<span>520</span></div>
                            <a href="#" class="book-btn">预订</a>
                        </div>
                    </div>
                    <div class="flight-footer">
                        <span class="tag">经济舱</span>
                        <span class="tag">可退改</span>
                        <span class="tag">含行李</span>
                    </div>
                </div>
                <div class="flight-card">
                    <div class="flight-header">
                        <div class="airline">
                            <img src="picture/h3.webp" alt="南航">
                            <span>南方航空</span>
                        </div>
                        <div class="flight-no">CZ3101</div>
                    </div>
                    <div class="flight-body">
                        <div class="departure">
                            <div class="time">09:15</div>
                            <div class="city">广州(CAN)</div>
                        </div>
                        <div class="duration">
                            <div class="line">
                                <span>2h45m</span>
                            </div>
                            <div class="type">直飞</div>
                        </div>
                        <div class="arrival">
                            <div class="time">12:00</div>
                            <div class="city">成都(CTU)</div>
                        </div>
                        <div class="price">
                            <div class="amount">¥<span>450</span></div>
                            <a href="#" class="book-btn">预订</a>
                        </div>
                    </div>
                    <div class="flight-footer">
                        <span class="tag">经济舱</span>
                        <span class="tag">可退改</span>
                        <span class="tag">含行李</span>
                    </div>
                </div>

            </div>
            <div class="view-all">
                <a href="#" class="btn">查看全部特价机票</a>
            </div>
        </section>

        <style>
            /* 特价机票样式 */
        </style>
    </main>

    <!-- 页脚 -->
    <footer class="ctrip-footer">
        <div class="container">

            <div class="footer-bottom">
                <p>© 2025 携程旅行网 | 沪ICP备08021041号</p>
                <div class="social-links">
                    <a href="#"><i class="fab fa-weixin"></i></a>
                    <a href="#"><i class="fab fa-weibo"></i></a>
                    <a href="#"><i class="fab fa-qq"></i></a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 初始化日期选择器
            const departurePicker = flatpickr("#departureDate", {
                locale: "zh",
                dateFormat: "Y-m-d",
                minDate: "today"
            });

            const returnPicker = flatpickr("#returnDate", {
                locale: "zh",
                dateFormat: "Y-m-d",
                minDate: new Date().fp_incr(1)
            });

            // 出发日期变化时更新返回日期的最小值
            departurePicker.config.onChange.push(function (selectedDates) {
                if (selectedDates.length > 0) {
                    returnPicker.set('minDate', selectedDates[0]);
                    // 如果返回日期小于新的出发日期，自动设置为出发日期+1天
                    if (returnPicker.selectedDates[0] && returnPicker.selectedDates[0] < selectedDates[0]) {
                        const nextDay = new Date(selectedDates[0]);
                        nextDay.setDate(nextDay.getDate() + 1);
                        returnPicker.setDate(nextDay);
                    }
                }
            });

            // 单程/往返切换
            const tripTypeRadios = document.querySelectorAll('input[name="tripType"]');
            const returnDateItem = document.querySelector('.return-date');

            tripTypeRadios.forEach(radio => {
                radio.addEventListener('change', function () {
                    if (this.value === 'oneway') {
                        returnDateItem.style.display = 'none';
                    } else {
                        returnDateItem.style.display = 'block';
                    }
                });
            });

            // 热门城市点击填入
            document.querySelectorAll('.hot-city').forEach(city => {
                city.addEventListener('click', function () {
                    const citiesContainer = this.closest('.hot-cities');
                    if (citiesContainer.classList.contains('departure')) {
                        document.getElementById('departureCity').value = this.textContent;
                    } else {
                        document.getElementById('arrivalCity').value = this.textContent;
                    }
                });
            });

            // 城市输入框焦点事件
            const cityInputs = document.querySelectorAll('#departureCity, #arrivalCity');
            cityInputs.forEach(input => {
                input.addEventListener('focus', function () {
                    const citiesContainer = this.id === 'departureCity' ?
                        document.querySelector('.hot-cities.departure') :
                        document.querySelector('.hot-cities.arrival');
                    citiesContainer.style.display = 'flex';
                });

                input.addEventListener('blur', function () {
                    setTimeout(() => {
                        const citiesContainer = this.id === 'departureCity' ?
                            document.querySelector('.hot-cities.departure') :
                            document.querySelector('.hot-cities.arrival');
                        citiesContainer.style.display = 'none';
                    }, 200);
                });
            });

            // 初始化轮播图
            new Swiper('.swiper-container', {
                loop: true,
                autoplay: {
                    delay: 4000,
                    disableOnInteraction: false
                },
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                speed: 800
            });

            // 热门航线标签切换
            const tabs = document.querySelectorAll('.tab');
            const tabPanes = document.querySelectorAll('.tab-pane');

            tabs.forEach(tab => {
                tab.addEventListener('click', function () {
                    // 移除所有active类
                    tabs.forEach(t => t.classList.remove('active'));
                    tabPanes.forEach(p => p.classList.remove('active'));

                    // 添加active类到当前标签
                    this.classList.add('active');

                    // 显示对应的内容
                    const tabId = this.getAttribute('data-tab');
                    document.getElementById(tabId).classList.add('active');
                });
            });
        });
    </script>
</body>

</html>